<!-- 话题分类 页 -->
<template>
	<view>
		<!-- 顶部选项卡 --------------------------------------------- -->
		<scroll-view
			scroll-x
			:scroll-into-view="scrollInto"
			scroll-with-animation
			class="scroll-row"
			style="height: 100rpx;"
		>
			<!-- 给每个子元素添加一个id，非常核心！！！ -->
			<view
				v-for="(item, index) in tabBars"
				:key="index"
				:id="'tab' + index"
				class="scroll-row-item px-3 py-2 font-md"
				:class="tabIndex === index ? 'text-main font-lg font-weight-bold' : ''"
				@click="changeTab(index)"
			>
				{{ item.classname }}
			</view>
		</scroll-view>
		<!-- 引入 全局分割线 组件 --------------------------------------------- -->
		<DividerLine></DividerLine>
		<!-- 分类详情 -->
		<swiper :duration="300" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
			<!-- 监听当前列表的 触底事件 @scrolltolower-->
			<swiper-item v-for="(item, index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
					<!-- 有数据时 展示 -->
					<template v-if="item.list.length > 0">
						<!-- 测试滚动区域 -->
						<!-- <view v-for="i in 100" :key="i">{{i}}</view> -->
						<block v-for="(itemL, indexL) in item.list" :key="indexL">
							<!-- 引入 话题列表组件 ，该组件通过choose
							判断是否发布页进入，如果是，那就选择话题-->
							<topicList :choose="choose" :item="itemL" :index="indexL"></topicList>
						</block>

						<!-- 上拉加载 -->
						<loadMore :loadmore="item.loadmore"></loadMore>
					</template>
					<!-- --------------------------------------------- -->
					<!-- 加载中 -->
					<template v-else-if="!item.firstLoad">
						<uni-load-more
							iconType="circle"
							showIcon
							status="loading"
							showText
							:content-text="contentText"
						/>
					</template>
					<!-- 无数据时 -->
					<template v-else>
						<noThing></noThing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引入话题列表组件
	import topicList from '@/components/dynacmic/topic-list.vue';
	// 引入下拉更多组件
	import loadMore from '@/components/common/load-more.vue';
	// 引入 兜底样式组件
	import noThing from '@/components/common/no-thing.vue';
	export default {
		// 注册引入的组件
		components: {
			loadMore,
			noThing,
			topicList,
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 顶部选项卡
				scrollInto: '', // 滚动到指定元素
				tabIndex: 0, // 默认选中第一个，并添加粉红色样式
				// 顶部选项卡数据
				tabBars: [],
				// 列表数据
				newsList: [],
				contentText: {
					contentrefresh: '加载中...',
				},
				// 判断 是否 为发布页 进入的
				choose: false,
			};
		},
		// 监听页面加载 -----------------------------------------------
		onLoad(e) {
			// 异步获取 系统信息
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res); 将rpx转换为px 使用uni.upx2px()
					//  减去 顶部选项卡的高度
					this.scrollH = res.windowHeight - uni.upx2px(107);
					// console.log(this.scrollH);
				},
			});
			// 根据选项生成列表
			this.getData();
			// 判断 是发布页面 add-input组件进入的
			if (e.choose) {
				// 动态修改 页面 标题
				uni.setNavigationBarTitle({
					title: '选择话题',
				});
				this.choose = true;
			}
		},
		methods: {
			// 获取列表数据 -------------------------------------------
			getData() {
				// 获取话题分类 接口
				this.$H.get('/topicclass').then((res) => {
					this.tabBars = res.list;
					// 存放 循环好的，列表数据
					const arr = [];
					// 循环遍历 顶部选项卡数据
					// 根据多少个选项 生成多少个模版 ，再赋值给列表数据newsList
					for (let i = 0; i < this.tabBars.length; i++) {
						// 生成列表模版数据
						let obj = {
							// 三种状态 1. 上拉加载更多 2. 加载中... 3. 没有更多了
							loadmore: '上拉加载更多',
							list: [],
							page: 1, // 分页
							// 用于判断，列表数据是否 重复加载
							firstLoad: false,
						};
						arr.push(obj);
					}
					this.newsList = arr;
					// 获取第一个 分类列表 的数据
					if (this.tabBars.length) {
						this.getList();
					}
				});
			},
			// 获取 指定分类 下的列表数据 ---------------------------------
			getList() {
				//  获取到当前 分类的 下标
				let index = this.tabIndex;
				// 获取指定分类 的 ID
				let id = this.tabBars[index].id;
				// 获取指定 列表数据 的 页数
				let page = this.newsList[index].page;
				// 判断 是否处于 第一页 列表数据（如果是就是用户在刷新，否则追加数据）
				let isRefresh = page === 1;

				// 获取 指定文章分类下的文章列表 接口请求
				this.$H
					.get('/topicclass/' + id + '/topic/' + page)
					.then((res) => {
						// 循环获取到，指定的列表数据，要循环遍历一下
						let list = res.list.map((v) => {
							// 调用 封装的 工具类utils.js中，转换列表数据方法
							return {
								id: v.id, // 此条话题数据 id
								coverImg: v.titlepic, // 话题图片
								title: v.title, // 话题名称
								desc: v.desc, // 话题描述
								news_count: v.post_count, // 动态 数据
								today_count: v.todaypost_count, // 今日 数据
							};
						});
						/* 根据获取到 指定id分类，赋值列表数据 
					   判断 是否处于 第一页 列表数据
					  （如果是 那用户正在刷新页面，否则追加数据）
					   加载更多[当前页数据，下一页数据]*/
						this.newsList[index].list = isRefresh ? [...list] : [...this.newsList[index].list, ...list];
						/* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
						this.newsList[index].loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多';
						// 判断是否 重复加载列表数据
						if (isRefresh) {
							this.newsList[index].firstLoad = true;
						}
					})
					.catch((err) => {
						// 如果未获取到数据
						if (!isRefresh) {
							// 如果不是刷新的情况下，退回上一页
							this.newsList[index].page--;
						}
					});
			},
			// 监听swiper滑动 ----------------------------------------
			onChangeTab(e) {
				// 分类列表滑动，顶部选项卡跟随切换
				this.changeTab(e.detail.current);
			},
			// 顶部选项卡（切换选项）------------------------------------
			changeTab(index) {
				// 如果点击的选项 全等于 自己，终止进程
				if (this.tabIndex === index) return;
				// 否则切换选项
				this.tabIndex = index;
				// 滚动到指定元素（必须和指定，的子元素id相同)
				this.scrollInto = 'tab' + index;
				/* 判断 首次加载列表数据成功，变为true, (防止重复加载) false就是未请求过*/
				if (!this.newsList[this.tabIndex].firstLoad) {
					// 获取 当前分类下的 列表数据
					this.getList();
				}
			},
			// 上拉加载更多 ，监听事件 ----------------------------------
			loadmore(index) {
				// 先拿到当前列表
				let item = this.newsList[index];
				// 判断是否处于可加载状态（上拉加载更多) 只请求一次接口
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...';

				/* 请求 指定分类 下的列表数据
				   展示下一页，要让 当前页数++ */
				item.page++;
				setTimeout(() => {
					this.getList();
				}, 2000);
			},
		},
	};
</script>

<style lang="scss" scoped></style>
